<div class="toolbar">
    <h4>Flex布局</h4>
    <p class="text-muted">Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。</p>
</div>
<div class="p-2">
    <div class="card">
        <div class="card-header bg-white">
            Flex布局测试工具
        </div>
        <div class="card-body">
            <div class="m-btn">
                <ts-dropdown [items]="['start','end','center','between','around']" [(value)]="justifyContent"></ts-dropdown>
                <ts-dropdown [items]="['nowrap','wrap','wrap-reverse']" [(value)]="flexWarp" class="ml-1"></ts-dropdown>
                <div tsDropdown>
                    <button tsToggle tsBtn class="dropdown-toggle ml-1">新增元素</button>
                    <div tsDropMenu>
                        <button (click)="addItem('start')" class="dropdown-item pointer">start</button>
                        <button (click)="addItem('end')" class="dropdown-item pointer">end</button>
                        <button (click)="addItem('center')" class="dropdown-item pointer">center</button>
                        <button (click)="addItem('baseline')" class="dropdown-item pointer">baseline</button>
                        <button (click)="addItem('stretch')" class="dropdown-item pointer">stretch</button>
                    </div>
                </div>
                <button (click)="removeItem()" tsBtn outline color="danger">移除元素</button>
            </div>
            <div class="mt-3 d-flex justify-content-{{justifyContent}} flex-{{flexWarp}}">
                <img *ngFor="let item of items" class="img-thumbnail m-1 align-self-{{item.align}}" width="100" [src]="item.src">
            </div>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header bg-white">grow与shrink</div>
        <div class="card-body d-flex">
            <div>
                <img height="100" src="assets/images/material/material-2.jpg">
            </div>
            <div class="p-2 bg-light flex-grow-1 border">
                <pre>
.flex-[grow|shrink]-0
.flex-[grow|shrink]-1
            </pre>
            </div>
        </div>
    </div>
</div>